import React, { ReactElement, useRef, useState, useEffect } from 'react';

interface Props {
  menuItem: any;
}

import qs from 'querystring';

// 引入 api
import { getMenu, menu, updateMenu } from '@/api/menu';

type TableListItem = {
  id: string;
  title: string;
  key: string;
  icon: string;
  createTime: string;
};

// 引入 antd
import { Table, Switch, Space, Button, message, Tag, Tree } from 'antd';

// 引入 antd pro
import ProForm, {
  DrawerForm,
  ProFormText,
  ProFormDateRangePicker,
  ProFormSelect,
  QueryFilter,
  ProFormDatePicker,
} from '@ant-design/pro-form';

import { PlusOutlined } from '@ant-design/icons';

export default function UpdateMenu({ menuItem }: Props): ReactElement {
  // 初始化一级菜单
  const [tableListDataSource, setTableListDataSource] = useState<
    Array<TableListItem>
  >([]);

  // 初始化
  useEffect(() => {
    initData();
    localStorage.menuId = menuItem.id;
  }, []);
  // 获取数据
  const initData = async () => {
    const res = await getMenu();
    setTableListDataSource(() => {
      return [...res.data.rows.children];
    });
  };
  const checkedMenu = menuItem?.children?.map((item: any) => {
    return item.id;
  });

  // 树形控件
  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>(checkedMenu);
  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>(checkedMenu);
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);

  // 树形菜单事件
  const onExpand = (expandedKeysValue: React.Key[]) => {
    console.log('onExpand', expandedKeysValue);
    // if not set autoExpandParent to false, if children expanded, parent can not collapse.
    // or, you can remove all expanded children keys.
    setExpandedKeys(expandedKeysValue);
    setAutoExpandParent(false);
  };

  const onCheck = (checkedKeysValue: any) => {
    console.log('onCheck', checkedKeysValue);
    setCheckedKeys(checkedKeysValue);
  };

  const onSelect = (selectedKeysValue: React.Key[], info: any) => {
    console.log('onSelect', info);
    setSelectedKeys(selectedKeysValue);
  };

  // 新增表单
  const formRef = useRef(menuItem);

  // 右侧新增表单确认异步关闭
  const waitTime = (time: number = 100) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(true);
      }, time);
    });
  };
  const update = async (item: menu) => {
    const menuId = localStorage.menuId;
    const menuName = item.title;
    console.log(item);

    let obj = {
      ...item,
      menuId,
      menuName,
      type: '0',
    };
    const res = await updateMenu(obj);

    console.log(res);
  };
  return (
    <DrawerForm<{}>
      title="新增菜单"
      formRef={formRef}
      initialValues={menuItem}
      trigger={<Button type="primary">修改</Button>}
      autoFocusFirstInput
      drawerProps={{
        forceRender: true,
        destroyOnClose: true,
      }}
      onFinish={async (values: any) => {
        await waitTime(2000);

        console.log('fin', values);

        update(values);
        message.success('提交成功');
        // 不返回不会关闭弹框
        return true;
      }}
    >
      <ProFormText
        name="title"
        width="md"
        label="菜单名称"
        placeholder="请输入名称"
        rules={[{ required: true, message: 'Please input your username!' }]}
      />
      <ProFormText
        width="md"
        name="path"
        label="菜单URL"
        placeholder="请输入名称"
        rules={[{ required: true, message: 'Please input your username!' }]}
      />
      <ProFormText
        width="md"
        name="component"
        label="组件地址"
        placeholder="请输入名称"
      />
      <ProFormText
        width="md"
        name="component"
        label="相关权限"
        placeholder="请输入名称"
      />
      <ProFormText
        width="md"
        name="component"
        label="菜单图标"
        placeholder="请输入名称"
      />
      <ProFormText
        width="md"
        name="component"
        label="菜单排序"
        placeholder="请输入名称"
      />
      树形：
      <Tree
        checkable
        onExpand={onExpand}
        expandedKeys={expandedKeys}
        autoExpandParent={autoExpandParent}
        onCheck={onCheck}
        checkedKeys={checkedKeys}
        onSelect={onSelect}
        selectedKeys={selectedKeys}
        treeData={tableListDataSource}
      />
    </DrawerForm>
  );
}
